<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    
    <style>

        .active {
            background-color: red;
        }
       
        .green {
            background-color: green;
        }
       
           </style> 

  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>

       <!-- 使用组件 -->
        <home>
              <!-- v-slot:default="slotProps" -->
            <!-- my-home-slot  不能用驼峰命名法 -->

            <template v-slot:my-home-slot='myhomeData'>
                <h2>{{myhomeData.bbb}}</h2>

                <ul>
                    <li v-for="(item,key,index) in myhomeData.myuser"
                    :class="index %2==0? 'active':'green'"
                    >
                    {{item}}----{{key}}
                    </li>
                </ul>
            </template>
        </home>
    </div>

     <!-- 模板 -->
     <template id="myhome">
         <div class="Box">
             <h2>home 组件</h2>

             <slot bbb='hello java' ccc="厉害" :myuser='user' name='my-home-slot'>{{aaa}}</slot>
         </div>
     </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('home',{
            template:'#myhome',
            data(){
                return {
                    user:{
                        lastName:'张三',
                        firstName:'三张',
                        sex:'男',
                        age:10,
                    },
                    aaa:'hello 嘎嘎'
                }
            }

        })


      var vm = new Vue({
        el: "#app",
        data: {
          msg: "vue",
        },
        methods: {},
      });
    </script>
  </body>
</html>
